<template>
   <nav class="msite_nav">
      <div class="swiper">
         <div class="swiper-wrapper">
            <div
               class="swiper-slide"
               v-for="(item, index) of list"
               :key="index"
            >
               <img :src="item.logo" alt="" @click="shopDetail(item)"/>
            </div>
         </div>
         <!-- 如果需要分页器 -->
         <div class="swiper-pagination"></div>
      </div>
   </nav>
</template>

<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";

export default {
   name: "Swiper",
   props: ["list"],
   mounted() {
      //swiper轮播图初始化
      new Swiper(".swiper", {
         loop: true,
         autoplay: true,
      });
   },
   methods: {
      shopDetail(shopInfo) {
         this.$router.push('/shop/' + shopInfo.id)
      }
   }
};
</script>

<style lang="stylus" scoped>
.msite_nav {
   bottom-border-1px(#e4e4e4);
   height: 200px;
   background: #fff;

   .swiper {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;

      img {
         width: 100%;
         height: 100%;
      }

      .swiper-pagination {
         position: absolute;
         bottom: 5px;
         left: 50%;
         transform: translateX(-50%);
      }
   }
}
</style>